<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-cell
					title="Children 数据类型"
					:desc="values1.length ? values1.join(' / ') : '请选择'"
					showArrow
					@onClick="show1 = true"
				></pure-cell>
				<pure-gap></pure-gap>

				<pure-cascader
					:show="show1"
					:list="list"
					:values="values1"
					@onOk="_handleOk1"
					@onNot="show1 = false"
					@onClose="show1 = false"
				></pure-cascader>

				<pure-cell
					title="Lists 数据类型"
					:desc="values2.length ? values2.join(' / ') : '请选择'"
					showArrow
					@onClick="show2 = true"
				></pure-cell>
				<pure-gap></pure-gap>

				<pure-cascader
					:show="show2"
					:list="options"
					:values="values2"
					dataMode="lists"
					@onOk="_handleOk2"
					@onNot="show2 = false"
					@onClose="show2 = false"
				></pure-cascader>
			</pj-demo>

			<!-- 实现省市区选择 -->
			<pj-demo title="实现省市区选择">
				<pure-cell
					title="选择地址"
					:desc="values3.length ? values3.join(' / ') : '请选择'"
					showArrow
					@onClick="show3 = true"
				></pure-cell>

				<pure-cascader
					:list="regionData"
					:values="values3"
					value-key="label"
					:show="show3"
					@onOk="handleOk3"
					@onNot="show3 = false"
					@onClose="show3 = false"
				></pure-cascader>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";
	import { onReady } from "@dcloudio/uni-app";
	import { regionData } from "element-china-area-data";

	// 显示状态
	const show1 = ref(false);
	const show2 = ref(false);
	const show3 = ref(false);

	// 数据
	const list = ref([]);

	// 选中值
	const values1 = ref([]);
	const values2 = ref([]);
	const values3 = ref([]);

	// 数据
	const options = [];

	// 确认事件
	function _handleOk1(indexes, items) {
		console.log(indexes, items);
		values1.value = items.map((item) => item.value);
		show1.value = false;
	}

	// 确认事件
	function _handleOk2(indexes, items) {
		console.log(indexes, items);
		values2.value = items.map((item) => item.value);
		show2.value = false;
	}

	// 确认事件
	function handleOk3(indexes, items) {
		console.log(indexes, items);
		values3.value = items.map((item) => item.label);
		show3.value = false;
	}

	// 生成 list 数据
	function generateList() {
		// 生成一级
		const level1 = [];
		for (let i = 1; i <= 20; i++) {
			level1.push({
				label: `一级${i}`,
				value: `一级${i}`,
				disabled: i === 10
			});
		}

		// 生成二级
		const level2 = [];
		for (let i = 1; i <= 20; i++) {
			level2.push({
				label: `二级${i}`,
				value: `二级${i}`
			});
		}

		// 生成三级
		const level3 = [];
		for (let i = 1; i <= 20; i++) {
			level3.push({
				label: `三级${i}`,
				value: `三级${i}`
			});
		}

		// 生成四级
		const level4 = [];
		for (let i = 1; i <= 20; i++) {
			level4.push({
				label: `四级${i}`,
				value: `四级${i}`
			});
		}

		// 生成五级
		const level5 = [];
		for (let i = 1; i <= 20; i++) {
			level5.push({
				label: `五级${i}`,
				value: `五级${i}`
			});
		}

		// 组织数据
		// 把五级分级加到四级中
		level4.forEach((item) => {
			item.children = level5;
		});

		// 把四级加到三级中
		level3.forEach((item) => {
			item.children = level4;
		});

		// 把三级加到二级中
		level2.forEach((item) => {
			item.children = level3;
		});

		// 把二级加到一级中
		level1.forEach((item) => {
			item.children = level2;
		});

		list.value = level1;
	}

	// 生成 options 数据
	function generateOptions() {
		// 第一列
		const cols1 = [];
		for (let i = 1; i <= 20; i++) {
			cols1.push({
				label: `一列${i}`,
				value: `一列${i}`
			});
		}

		// 第二列
		const cols2 = [];
		for (let i = 1; i <= 20; i++) {
			cols2.push({
				label: `二列${i}`,
				value: `二列${i}`
			});
		}

		// 第三列
		const cols3 = [];
		for (let i = 1; i <= 20; i++) {
			cols3.push({
				label: `三列${i}`,
				value: `三列${i}`
			});
		}

		// 第四列
		const cols4 = [];
		for (let i = 1; i <= 20; i++) {
			cols4.push({
				label: `四列${i}`,
				value: `四列${i}`
			});
		}

		// 第五列
		const cols5 = [];
		for (let i = 1; i <= 20; i++) {
			cols5.push({
				label: `五列${i}`,
				value: `五列${i}`
			});
		}

		options.push(cols1, cols2, cols3, cols4, cols5);
	}

	// 生成数据
	onReady(() => {
		generateList();
		generateOptions();
	});
</script>

<style lang="scss" scoped></style>
